<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="__ADMIN__/css/font.css">
<link rel="stylesheet" href="__ADMIN__/css/xadmin.css">
<script type="text/javascript" src="__ADMIN__/js/jquery.min.js"></script>
<script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>
<script type="text/javascript" src="__ADMIN__/js/cookie.js"></script>
{include file="public/layui" /}
<style>
	.layui-btn+.layui-btn{
    margin-left: 0;
}
</style>
</head>

<body>
<div class="x-nav">
	<span class="layui-breadcrumb">
		<a>
			<cite>人事表</cite>
		</a>
	</span>
	<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
		<i class="layui-icon layui-icon-refresh-3" style="line-height:30px"></i>
	</a>
</div>
<div class="x-body x-admin">
	<xblock>
		{if condition="input('status') neq '0' "}
		<!--<button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>-->
		<button class="layui-btn" onclick="x_admin_show('新增员工','{:url('Staff/add')}',false,500,700)">
			<i class="layui-icon"></i>新增
		</button>

		<a href="{:url('Staff/lst',['group_id'=>0])}" class="layui-btn layui-btn-primary">全部</a>
		<a href="{:url('Staff/lst',['group_id'=>5])}" class="layui-btn layui-btn-primary">主管</a>
		<a href="{:url('Staff/lst',['group_id'=>2])}" class="layui-btn layui-btn-primary">员工</a>
		<!--<a href="{:url('Staff/lst',['group_id'=>6])}" class="layui-btn layui-btn-primary">回访专员</a>-->
		<a href="{:url('Staff/lst',['group_id'=>7])}" class="layui-btn layui-btn-primary">运营人员</a>
		<a href="{:url('Staff/lst',['group_id'=>8])}" class="layui-btn layui-btn-primary">行政</a>

		<button class="layui-btn" onclick="x_admin_show('员工可视面板','{:url('Staff/showECharts')}')">员工可视面板</button>
		{/if}
		<div class="layui-card-body" style="padding-left: 0;float:left;padding-left:0px;padding-top:0;">
			<form class="layui-form layui-col-space5" action="?status={:input('status')}" method="get">
				<div class="layui-inline layui-show-xs-block">
					<input style="width:260px;" type="text" name="keywords" id="search" value="{:input('keywords')}" placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-inline layui-show-xs-block">
					<button class="layui-btn" id="search-btn">
						<i class="layui-icon"></i>
					</button>
				</div>
			</form>
		</div>
	</xblock>
	<div class="layui-table-body layui-table-main" style="width: 100%;">
		<table class="layui-table layui-form" id="personnel"></table>
	</div>
</div>
<script type="text/html" id="bar">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</div>
</script> 

<script type="text/html" id="sbjnTpl">
<select id="sbjnTpl" class="layui-border" lay-ignore>
<option value="已缴纳">已缴纳</option>
<option value="未缴纳">未缴纳</option>
</select>
</script>
<script>
layui.use(['form','layer','jquery','table','util'], function(){
    form = layui.form,
    layer = layui.layer
    ,$ = layui.jquery
    ,table = layui.table
    ,util = layui.util;
    
    
    table.render({
        elem: '#personnel',
        url:'{:url('staff/personnelTable')}?limit=9999', 
        toolbar: 'default',
        height: $(window).height() - 150,
        cellMinWidth: 80,
        //totalRow: true, 
        limis: 9999,
        page: false,
        cols: [function(){
            var arr = [
                {field:'id', title:'ID', width:80, fixed: 'left'},
                {field:'dpt_name', title:'部门', width:100, fixed: 'left'},
                {field:'name', title:'姓名', fixed: 'left'},
                {field:'sex', title:'性别'},
                {field:'nation', title:'民族'},
                {field:'native', title:'籍贯'},
                {field:'Marriage', title:'婚姻情况'},
                {field:'idnum', title:'身份证号码', width:100},
                {field:'join_time', title:'入职时间', width:100},
                {field:'job_name', title:'职务'},
                {field:'education', title:'学历'},
                {field:'address', title:'家庭住址'},
                {field:'phone', title:'联系电话', width:110},
                {field:'emergency_contact', title:'紧急联系人', width:100},
                {field:'emergency_contact_gx', title:'联系人关系', width:100},
                {field:'emergency_contact_phone', title:'联系人电话', width:100},
                {field:'classify', title:'社保缴纳情况', width:110 , templet1: '#sbjnTpl'},
                {field:'status', title:'在职情况' ,edit1: 'text'},
                {field:'leave_time', title:'离职时间' },
                {field:'age', title:'年龄'},
                {field:'seniority', title:'工龄'},
                {title:'操作', fixed: 'right', width:130, toolbar: '#bar'},
            ];
            
            // 初始化筛选状态
            var local = layui.data('table-filter-personnel'); 
            layui.each(arr, function(index, item){
                if(item.field in local){
                    item.hide = local[item.field];
                }
            });
            return arr;
        }() ],  
        done: function(){
            // 记录筛选状态
            var that = this;
            that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
                var input = $(this).prev()[0];
                // 此处表名可任意定义
                layui.data('table-filter-test', {
                    key: input.name
                    ,value: input.checked
                })
            });
        }
    });
    
    table.on('edit(personnel)', function(obj){
        var field = obj.field;
        var value = obj.value;
        var data = obj.data;
        layer.msg('编辑成功', {icon: 1});
        
        var update = {};return td.find('select').val();
        update[field] = value;
        obj.update(update);
    });
    
    table.on('tool(personnel)', function(obj){ // 双击 toolDouble
        var data = obj.data; // 获得当前行数据
        // console.log(obj)
        if(obj.event === 'edit'){
          layer.open({
            title: '编辑 - id:'+ data.id,
            type: 1,
            area: ['80%','80%'],
            content: '<div style="padding: 16px;">自定义表单元素</div>'
          });
        } else if(obj.event === 'more'){
          // 更多 - 下拉菜单
          dropdown.render({
            elem: this, // 触发事件的 DOM 对象
            show: true, // 外部事件触发即显示
            data: [{
              title: '查看',
              id: 'detail'
            },{
              title: '删除',
              id: 'del'
            }],
            click: function(menudata){
              if(menudata.id === 'detail'){
                layer.msg('查看操作，当前行 ID:'+ data.id);
              } else if(menudata.id === 'del'){
                layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
                  obj.del(); // 删除对应行（tr）的DOM结构
                  layer.close(index);
                  // 向服务端发送删除指令
                });
              } 
            },
            align: 'right', // 右对齐弹出
            style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
          })
        }
    });
        
    
    form.on('switch(status)', function(data){
      var obj=data.elem;
      var id = data.elem.id;
      var status = data.value;
      $.ajax({
          type:'POST',
          dataType:'json',
          data:{status:status,id:id},
          url:"{:url('Admin/changeStatus')}",
          success:function(o){
            if(o.icon == 1){
              $(obj).attr('value',1);
            }else{
              $(obj).attr('value',0);
            }
            layer.msg(o.msg,{icon: o.icon,time:1000});
          }
        });
    });
    
    
    
    
  });

/*管理员-删除*/
function member_del(obj,id){
  layer.confirm('确认要删除该管理员吗？',function(index){
      //发异步删除数据
      $.ajax({
        type:'POST',
        dataType:'json',
        data:{id:id},
        url:"{:url('Admin/del')}",
        success:function(o){
          if(o.icon ==1){
            $(obj).parents("tr").remove();
          }
          layer.msg(o.msg,{icon:o.icon,time:1000});
        }
      });
  });
}
</script>
</body>

</html>